<template>
    <div class="custom-dropdown">
        <div class="dropdown-trigger"
            @click="handleClick"
            :class="{ 'is-open': props.isOpen }">
            <span>Save as template</span>
            <el-icon class="arrow-icon"><ArrowDown /></el-icon>
        </div>

        <transition name="dropdown">
            <div v-if="props.isOpen" class="dropdown-menu">
                <!-- <slot /> -->
                <!-- Enter your name here -->
                <el-input style="margin-bottom: 8px;" :model-value="props.n" @update:model-value="emit('update:n', $event)" placeholder="Name here please" />
                <el-alert v-if="props.bad_msg !== ''" :title="props.bad_msg" type="error" show-icon style="margin-bottom: 8px;" />

                <div class="bn">
                    <el-button type="success" round @click="handleSubmit">Save</el-button>
                    <el-button round @click="handleCancel">Cancel</el-button>
                </div>
            </div>
        </transition>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

const props = defineProps(['n', 'isOpen', 'bad_msg'])
const emit = defineEmits(['update:isOpen', 'update:n', 'submit', 'cancel'])
// 🦜 : try to keep the 'update:' event minimal..
function handleSubmit() {
    emit('submit', props.n);
}

function handleCancel(){
    emit('cancel');
}

function handleClick() {
    console.log(`handleClick ${props.isOpen}`)
    emit('update:isOpen', !props.isOpen);
}


function handleClickOutside(event: MouseEvent) {
    console.log(`handleClickOutside ${event}`)
    const dropdown = document.querySelector('.custom-dropdown');
    if (dropdown && !dropdown.contains(event.target as Node)) {
        emit('update:isOpen', false);
        // props.isOpen = false;
    }
}

onMounted(() => {
    // document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
    // document.removeEventListener('click', handleClickOutside);
});

</script>

<style lang="scss" scoped>
.custom-dropdown {
    display: inline-block;
    position: relative;
    width: 200px;
    margin-right: 12px;

    .dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 15px ;
        background: var(--el-fill-color-lighter);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
            background: var(--el-bg-color);
            border-color: var(--el-border-color);
            box-shadow: 0 2px 8px var(--el-box-shadow-lighter);
        }
        
        &.is-open {
            background: var(--el-bg-color);
            border-color: var(--el-color-primary);
            box-shadow: 0 2px 8px var(--el-color-primary-light-9);
            
            .arrow-icon {
                transform: rotate(180deg);
                color: var(--el-color-primary);
            }
        }
        
        span {
            color: var(--el-text-color-regular);
            font-size: 14px;
            font-weight: 500;
        }
        
        .arrow-icon {
            color: var(--el-text-color-placeholder);
            font-size: 12px;
            transition: all 0.2s ease;
        }
    }
    
    .dropdown-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: var(--el-border-radius-base);
        box-shadow: var(--el-box-shadow-light);
        z-index: 2000;
        padding: 16px;

        .bn {
            display: flex;
            gap: 8px;

            button {
                flex: 1;
                transition: all 0.2s ease;
            }
        }
    }
}

.dropdown-enter-active,
.dropdown-leave-active {
    transition: all 0.2s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
    opacity: 0;
    transform: translateY(-4px);
}
</style>

